<template>
  <Card class="engine-card">
    <div class="engine-state">
      <div class="engine-state-desc">
        {{ obj.projectStatus }}
      </div>
    </div>
    <p class="engine-content-title">{{ obj.projectName }}</p>
    <div class="engine-content">
      <div class="content" style="margin-top: 10px">
        <Row :gutter="50">
          <i-col span="8">
            <p class="content-title">施工地址：<span>{{ obj.projectAddress }}</span></p>
          </i-col>
          <i-col span="8">
            <p class="content-title">类型：<span>{{ $dataInfo.getSubTitle(obj.projectType) }}</span></p>
          </i-col>
          <i-col span="8">
            <p class="content-title">项目状态：<span>{{ obj.projectStatus }}</span></p>
          </i-col>
        </Row>
        <Row :gutter="50" style="margin-top: 10px">
          <i-col span="8">
            <p class="content-title">要开工时间：<span>{{ handelDate(obj.projectStartTime) }}</span></p>
          </i-col>
          <i-col span="8">
            <p class="content-title">要交付时间：<span>{{ handelDate(obj.projectEndTime) }}</span></p>
          </i-col>
        </Row>
      </div>
      <div class="operate">
        <Button type="primary" @click="editEngine(obj.id)" icon="ios-create-outline" v-show="show">
          编辑
        </Button>
      </div>
    </div>
    <div class="engine-progress">
      <p class="engine-progress-title">
        <span>项目工期</span>
        <span @click="showDetail">{{ title }}
          <Icon :type="icon" />
        </span>
      </p>
      <Steps :current="Number(obj.currFlowIndex)" class="engine-step" size="small">
        <Step title="规划设计"></Step>
        <Step title="挖槽定线"></Step>
        <Step title="浚前测量"></Step>
        <Step title="导标设置"></Step>
        <Step title="断面尺寸测量"></Step>
        <Step title="施工辅助工程"></Step>
        <Step title="开工展布"></Step>
        <Step title="施工"></Step>
        <Step title="验收"></Step>
      </Steps>
      <div class="step-echart" v-show="title === '收起详情'">
        <project-process-echart></project-process-echart>
      </div>
    </div>
  </Card>
</template>

<script>
  import ProjectProcessEchart from "./echart/ProjectProcessEchart";
  import Timer from '../../../libs/timeUtil';
  import {mapActions} from 'vuex';
  export default {
    name: "EngineCenterCard",
    components: {ProjectProcessEchart},
    props: {
      obj: {
        Object,
        default: () => {}
      },
      show: {
        Boolean,
        default: true
      }
    },
    data() {
      return {
        title: '展开详情',
        icon: 'ios-arrow-down'
      }
    },
    methods: {
      ...mapActions('baseTask', ['updateIsEngineEdit']),
      showDetail() {
        this.icon = this.title === '展开详情' ? 'ios-arrow-up' : 'ios-arrow-down';
        this.title = this.title === '展开详情' ? '收起详情' : '展开详情';
      },
      handelDate(date) {
        return Timer.timestampToDate(date);
      },
      editEngine(id) {
        this.$router.push({
          path: '/operate-engine',
          query: {
            id: id,
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .engine-card {
    position: relative;
    margin-top: 15px;
    .engine-state {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 86px;
      text-align: center;
      height: 80px;
      background: url("../../../assets/images/normal.png");
      .engine-state-desc {
        transform: rotateZ(42.5deg)  translate(20.5px, 9px);
        color: #fff;
      }
    }
    .engine-content-title {
      font-size: 14px;
      font-weight: bold;
    }
    .engine-content {
      display: flex;
      justify-content: space-between;
      .content {
        width: 88%;
        .content-title {
          color: #888;
          font-size: 12px;
          font-weight: bold;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          span {
            color: rgb(69, 69, 69);
          }
        }
      }
      .operate {
        width: 10%;
        padding-top: 5px;
      }
    }
    .engine-progress {
      width: 100%;
      margin-top: 10px;
      .engine-progress-title {
        font-weight: bold;
        font-size: 12px;
        color: rgb(69, 69, 69);
        span:nth-child(2) {
          margin-left: 30px;
          cursor: pointer;
          color: rgb(27, 127, 221);
        }
      }
      .engine-step {
        margin-top: 10px;
      }
      .step-echart {
        /*width: 1000px;*/
        height: 500px;
      }
    }
  }
</style>
